import React, { Component } from 'react';
import indexCss from "./index.module.scss";
import { connect } from "react-redux";
// 引入 获取路由对象的函数
import { withRouter } from "react-router-dom";
 

// 类组件 => 函数式组件 => 高性能组件
 
const Index = React.memo((props) => {
  const {history,cityName}=props;
  return (
    <div className={indexCss.city_input}>
      <div className={indexCss.input_wrap}>
        <div
          onClick={() => history.push("/cityselect")}
          className={indexCss.city_label}>
          <span>{cityName}</span>
          <i className={
            [
              "iconfont",
              "icon-arrow",
              indexCss["icon-arrow"]
            ].join(" ")
          }></i>
        </div>
        <div className={indexCss.city_address}>
          {/*  iconfont icon-seach 不能改 图标就无法显示 */}
          {/*  */}
          <i className={
            [
              "iconfont",
              "icon-seach",
              indexCss["icon-seach"]
            ].join(" ")
          }></i>
          <span>请输入小区或地址</span>
        </div>
      </div>
      <div className={indexCss.map_point}
        onClick={() => history.push("/mapfound")}
      >
        <i className={
          [
            "iconfont",
            "icon-map",
            indexCss["icon-map"]
          ].join(" ")
        }></i>
      </div>
    </div>
  );
})


// 负责将仓库中的数据映射到组件的props当中
const mapStateToProps = (state) => {
  return {
    cityName: state.mapReducer.city.name
  }
}


// 使用上 withRouter 函数  增强组件功能 => 让你的组件的props属性  拥有 路由对象
// connect 函数 增强组件功能 => 让你的组件的props属性 拥有 redux的数据 
// export default connect(mapStateToProps,null)(withRouter(index));
export default withRouter(connect(mapStateToProps, null)(Index));